<template>
  <div v-bind:style="mainbody">
    <div class="detail_mask" style="display: none;" ref="lyx_ctbz" @click="closemask()">
      <div class="detail_mask_bd" style="max-height:100%;overflow-y:auto;">
        <h2 class="detail_mask_title">服务保障</h2>
        <dl class="detail_safeguard_list">
          <dt>成团保障</dt>
          <dd>产品所有出发日期预订成功均可发团（除不可抗力因素）</dd>
        </dl>
      </div>
      <span class="detail_mask_close" data-maskcloser="" data-sk-eid="hy_ctr_ptag_close"></span>
    </div>
    <!--头部的广告图-->
    <yd-slider autoplay="3000">
        <yd-slider-item>
            <a href="http://www.ydcss.com">
                <img src="http://static.ydcss.com/uploads/ydui/1.jpg">
            </a>
        </yd-slider-item>
        <yd-slider-item>
            <a href="http://www.ydcss.com">
                <img src="http://static.ydcss.com/uploads/ydui/2.jpg">
            </a>
        </yd-slider-item>
        <yd-slider-item>
            <a href="http://www.ydcss.com">
                <img src="http://static.ydcss.com/uploads/ydui/3.jpg">
            </a>
        </yd-slider-item>
    </yd-slider>
    <!--标题内容区域-->
    <div class="" style="margin-top:10px">
      <div id="js_product_info" class="detail_product_intro">
        <div id="js_bargain_intro_tour" class="detail_intro_box">
          <h2>{{basedata.product_name}}
            <i class="diamond diamond_0"></i>
          </h2>
          <p id="js_study_tips" class="detail_study_tips">{{basedata.product_sub_name}}</p>
          <!--价格区域-->
          <div id="js_pricebox_placeholder">
            <div id="js_price_box" class="price_box_new">
              <p class="price_new"><dfn></dfn><em></em></p>
              <p class="price_new_save"></p>
            </div>
          </div>
        </div>
        <!--标签区域-->
        <div id="js_tags_placeholder">
          <div class="detail_label">
            <span v-for="item in labeldata" :key="item.index">
              <i>{{item}}</i>
            </span>
          </div>
        </div> 
        <!--优惠信息-->
        <div id="js_promotion_placeholder" data-sk-eid="hy_ctr_disc">
          <!--react-empty: 118-->
        </div>
        <!--服务标签-->

        <div class="detail_safeguard" data-mask="ServiceGuarantee" data-sk-eid="hy_ctr_ptag" ref="lyx_ctbzed" @click="guarantee()">
          <hd-svg-icon name="hd-duihao" size="15px" color=""></hd-svg-icon>
          <em>成团保障</em>
          <!-- <hd-svg-icon name="hd-mjiantou" size="15px" color="red" style=""></hd-svg-icon> -->
        </div>

        <!--领取优惠券-->
        <div id="GetCoupon" data-mask="CouponMask"></div>
        <!--达人信息-->
        <div id="js_privileged_placeholder"></div>
      </div>
    </div>
    <!--选项卡区域-->
    <div class="mui-col-sm-12 mui-col-xs-12">
      <div id="ctm_tour_detail_schedule" class="js_schedule detail_mod_box detail_mod_schedule">
        <div class="c_city_set">
          <div class="c_city_hd">
            <ul class="cui-tab-mod">
              <li class="cui-tab-current" data-cityname="北京" data-sk-eid="hy_ctr_dep" data-sk-edata="{&quot;dep&quot;:&quot;北京&quot;}">
                <a href="javascript:;">游团日期</a>
              </li>
              <li></li><i class="cui-tab-scrollbar cui-tabnum2"></i></ul>
          </div>
          <!-- <a href="javascript:;" class="c_more_set" data-mask="ScheduleMask" data-sk-eid="hy_ctr_dep_more" data-more="true" data-disable="true">更多出发地</a> -->

          <!-- Swiper -->
          <div class="swiper-container c_city_bd">
            <div class="swiper-wrapper c_city_list ">
              <div class="swiper-slide" v-for="traveldate in traveldatearr" :key="traveldate.index">
						    <a href="javascript:;" data-schedule="" class="swiper-datatime" @click="checkdate(traveldate)">
                  <span class="date">{{traveldate.xmtour_date}}</span>
                  <span class="price"><dfn>¥{{traveldate.adult_sale_price}}</dfn></span>
                </a>
						  </div>
            </div>
            <!-- Add Scrollbar -->
            <div class="swiper-scrollbar"></div>
          </div>
          <a href="javascript:;" class="c_more r_url">更多班期</a>

          <div data-maskname="ScheduleMask" id="ScheduleMask" style="display: none;">
            <div class="warp_z" data-maskcloser="true" data-sk-eid="hy_ctr_change_dep_close"></div>
            <div class="detai_mask_bottom" style="display: block;"><span class="detail_bottom_close" data-maskcloser="true" data-sk-eid="hy_ctr_change_dep_close"></span>
              <h2 class="detai_mask_title">请选择出发地</h2>
              <div class="detail_mask_bd" style="max-height: 100%; overflow-y: auto;">
                <ul class="detail_start">
                  <li class="cur" data-cityname="北京" data-cityid="1" data-sk-eid="hy_ctr_dep_more_city" data-sk-edata="{&quot;dep&quot;:&quot;北京&quot;}" data-maskcloser="true">
                    <p class="site">北京</p>
                    <p class="price"><dfn>¥</dfn>2201</p>
                  </li>
                  <li class="" data-cityname="上海" data-cityid="2" data-sk-eid="hy_ctr_dep_more_city" data-sk-edata="{&quot;dep&quot;:&quot;上海&quot;}" data-maskcloser="true">
                    <p class="site">上海</p>
                    <p class="price"><dfn>¥</dfn>2000</p>
                  </li>
                  <li class="" data-cityname="天津" data-cityid="3" data-sk-eid="hy_ctr_dep_more_city" data-sk-edata="{&quot;dep&quot;:&quot;天津&quot;}" data-maskcloser="true">
                    <p class="site">天津</p>
                    <p class="price"><dfn>¥</dfn>2201</p>
                  </li>
                  <li class="" data-cityname="重庆" data-cityid="4" data-sk-eid="hy_ctr_dep_more_city" data-sk-edata="{&quot;dep&quot;:&quot;重庆&quot;}" data-maskcloser="true">
                    <p class="site">重庆</p>
                    <p class="price"><dfn>¥</dfn>2000</p>
                  </li>
                  <li class="" data-cityname="哈尔滨" data-cityid="5" data-sk-eid="hy_ctr_dep_more_city" data-sk-edata="{&quot;dep&quot;:&quot;哈尔滨&quot;}" data-maskcloser="true">
                    <p class="site">哈尔滨</p>
                    <p class="price"><dfn>¥</dfn>2000</p>
                  </li>
                  <li class="" data-cityname="青岛" data-cityid="7" data-sk-eid="hy_ctr_dep_more_city" data-sk-edata="{&quot;dep&quot;:&quot;青岛&quot;}" data-maskcloser="true">
                    <p class="site">青岛</p>
                    <p class="price"><dfn>¥</dfn>2000</p>
                  </li>
                  <li class="" data-cityname="西安" data-cityid="10" data-sk-eid="hy_ctr_dep_more_city" data-sk-edata="{&quot;dep&quot;:&quot;西安&quot;}" data-maskcloser="true">
                    <p class="site">西安</p>
                    <p class="price"><dfn>¥</dfn>2000</p>
                  </li>
                  <li class="" data-cityname="南京" data-cityid="12" data-sk-eid="hy_ctr_dep_more_city" data-sk-edata="{&quot;dep&quot;:&quot;南京&quot;}" data-maskcloser="true">
                    <p class="site">南京</p>
                    <p class="price"><dfn>¥</dfn>2000</p>
                  </li>
                  <li class="" data-cityname="无锡" data-cityid="13" data-sk-eid="hy_ctr_dep_more_city" data-sk-edata="{&quot;dep&quot;:&quot;无锡&quot;}" data-maskcloser="true">
                    <p class="site">无锡</p>
                    <p class="price"><dfn>¥</dfn>2000</p>
                  </li>
                  <li class="" data-cityname="苏州" data-cityid="14" data-sk-eid="hy_ctr_dep_more_city" data-sk-edata="{&quot;dep&quot;:&quot;苏州&quot;}" data-maskcloser="true">
                    <p class="site">苏州</p>
                    <p class="price"><dfn>¥</dfn>2000</p>
                  </li>
                  <li class="" data-cityname="杭州" data-cityid="17" data-sk-eid="hy_ctr_dep_more_city" data-sk-edata="{&quot;dep&quot;:&quot;杭州&quot;}" data-maskcloser="true">
                    <p class="site">杭州</p>
                    <p class="price"><dfn>¥</dfn>2000</p>
                  </li>
                  <li class="" data-cityname="厦门" data-cityid="25" data-sk-eid="hy_ctr_dep_more_city" data-sk-edata="{&quot;dep&quot;:&quot;厦门&quot;}" data-maskcloser="true">
                    <p class="site">厦门</p>
                    <p class="price"><dfn>¥</dfn>2000</p>
                  </li>
                  <li class="" data-cityname="成都" data-cityid="28" data-sk-eid="hy_ctr_dep_more_city" data-sk-edata="{&quot;dep&quot;:&quot;成都&quot;}" data-maskcloser="true">
                    <p class="site">成都</p>
                    <p class="price"><dfn>¥</dfn>2000</p>
                  </li>
                  <li class="" data-cityname="深圳" data-cityid="30" data-sk-eid="hy_ctr_dep_more_city" data-sk-edata="{&quot;dep&quot;:&quot;深圳&quot;}" data-maskcloser="true">
                    <p class="site">深圳</p>
                    <p class="price"><dfn>¥</dfn>2000</p>
                  </li>
                  <li class="" data-cityname="广州" data-cityid="32" data-sk-eid="hy_ctr_dep_more_city" data-sk-edata="{&quot;dep&quot;:&quot;广州&quot;}" data-maskcloser="true">
                    <p class="site">广州</p>
                    <p class="price"><dfn>¥</dfn>2000</p>
                  </li>
                  <li class="" data-cityname="桂林" data-cityid="33" data-sk-eid="hy_ctr_dep_more_city" data-sk-edata="{&quot;dep&quot;:&quot;桂林&quot;}" data-maskcloser="true">
                    <p class="site">桂林</p>
                    <p class="price"><dfn>¥</dfn>2000</p>
                  </li>
                  <li class="" data-cityname="南通" data-cityid="82" data-sk-eid="hy_ctr_dep_more_city" data-sk-edata="{&quot;dep&quot;:&quot;南通&quot;}" data-maskcloser="true">
                    <p class="site">南通</p>
                    <p class="price"><dfn>¥</dfn>2000</p>
                  </li>
                  <li class="" data-cityname="银川" data-cityid="99" data-sk-eid="hy_ctr_dep_more_city" data-sk-edata="{&quot;dep&quot;:&quot;银川&quot;}" data-maskcloser="true">
                    <p class="site">银川</p>
                    <p class="price"><dfn>¥</dfn>2000</p>
                  </li>
                  <li class="" data-cityname="兰州" data-cityid="100" data-sk-eid="hy_ctr_dep_more_city" data-sk-edata="{&quot;dep&quot;:&quot;兰州&quot;}" data-maskcloser="true">
                    <p class="site">兰州</p>
                    <p class="price"><dfn>¥</dfn>2000</p>
                  </li>
                  <li class="" data-cityname="太原" data-cityid="105" data-sk-eid="hy_ctr_dep_more_city" data-sk-edata="{&quot;dep&quot;:&quot;太原&quot;}" data-maskcloser="true">
                    <p class="site">太原</p>
                    <p class="price"><dfn>¥</dfn>2000</p>
                  </li>
                  <li class="" data-cityname="延安" data-cityid="110" data-sk-eid="hy_ctr_dep_more_city" data-sk-edata="{&quot;dep&quot;:&quot;延安&quot;}" data-maskcloser="true">
                    <p class="site">延安</p>
                    <p class="price"><dfn>¥</dfn>2000</p>
                  </li>
                  <li class="" data-cityname="运城" data-cityid="140" data-sk-eid="hy_ctr_dep_more_city" data-sk-edata="{&quot;dep&quot;:&quot;运城&quot;}" data-maskcloser="true">
                    <p class="site">运城</p>
                    <p class="price"><dfn>¥</dfn>2000</p>
                  </li>
                  <li class="" data-cityname="济南" data-cityid="144" data-sk-eid="hy_ctr_dep_more_city" data-sk-edata="{&quot;dep&quot;:&quot;济南&quot;}" data-maskcloser="true">
                    <p class="site">济南</p>
                    <p class="price"><dfn>¥</dfn>2000</p>
                  </li>
                  <li class="" data-cityname="长春" data-cityid="158" data-sk-eid="hy_ctr_dep_more_city" data-sk-edata="{&quot;dep&quot;:&quot;长春&quot;}" data-maskcloser="true">
                    <p class="site">长春</p>
                    <p class="price"><dfn>¥</dfn>2201</p>
                  </li>
                  <li class="" data-cityname="长沙" data-cityid="206" data-sk-eid="hy_ctr_dep_more_city" data-sk-edata="{&quot;dep&quot;:&quot;长沙&quot;}" data-maskcloser="true">
                    <p class="site">长沙</p>
                    <p class="price"><dfn>¥</dfn>2000</p>
                  </li>
                  <li class="" data-cityname="常州" data-cityid="213" data-sk-eid="hy_ctr_dep_more_city" data-sk-edata="{&quot;dep&quot;:&quot;常州&quot;}" data-maskcloser="true">
                    <p class="site">常州</p>
                    <p class="price"><dfn>¥</dfn>2000</p>
                  </li>
                  <li class="" data-cityname="佛山" data-cityid="251" data-sk-eid="hy_ctr_dep_more_city" data-sk-edata="{&quot;dep&quot;:&quot;佛山&quot;}" data-maskcloser="true">
                    <p class="site">佛山</p>
                    <p class="price"><dfn>¥</dfn>2000</p>
                  </li>
                  <li class="" data-cityname="合肥" data-cityid="278" data-sk-eid="hy_ctr_dep_more_city" data-sk-edata="{&quot;dep&quot;:&quot;合肥&quot;}" data-maskcloser="true">
                    <p class="site">合肥</p>
                    <p class="price"><dfn>¥</dfn>2000</p>
                  </li>
                  <li class="" data-cityname="宁波" data-cityid="375" data-sk-eid="hy_ctr_dep_more_city" data-sk-edata="{&quot;dep&quot;:&quot;宁波&quot;}" data-maskcloser="true">
                    <p class="site">宁波</p>
                    <p class="price"><dfn>¥</dfn>2000</p>
                  </li>
                  <li class="" data-cityname="石家庄" data-cityid="428" data-sk-eid="hy_ctr_dep_more_city" data-sk-edata="{&quot;dep&quot;:&quot;石家庄&quot;}" data-maskcloser="true">
                    <p class="site">石家庄</p>
                    <p class="price"><dfn>¥</dfn>2201</p>
                  </li>
                  <li class="" data-cityname="沈阳" data-cityid="451" data-sk-eid="hy_ctr_dep_more_city" data-sk-edata="{&quot;dep&quot;:&quot;沈阳&quot;}" data-maskcloser="true">
                    <p class="site">沈阳</p>
                    <p class="price"><dfn>¥</dfn>2201</p>
                  </li>
                  <li class="" data-cityname="武汉" data-cityid="477" data-sk-eid="hy_ctr_dep_more_city" data-sk-edata="{&quot;dep&quot;:&quot;武汉&quot;}" data-maskcloser="true">
                    <p class="site">武汉</p>
                    <p class="price"><dfn>¥</dfn>2000</p>
                  </li>
                  <li class="" data-cityname="威海" data-cityid="479" data-sk-eid="hy_ctr_dep_more_city" data-sk-edata="{&quot;dep&quot;:&quot;威海&quot;}" data-maskcloser="true">
                    <p class="site">威海</p>
                    <p class="price"><dfn>¥</dfn>2000</p>
                  </li>
                  <li class="" data-cityname="徐州" data-cityid="512" data-sk-eid="hy_ctr_dep_more_city" data-sk-edata="{&quot;dep&quot;:&quot;徐州&quot;}" data-maskcloser="true">
                    <p class="site">徐州</p>
                    <p class="price"><dfn>¥</dfn>2000</p>
                  </li>
                  <li class="" data-cityname="榆林" data-cityid="527" data-sk-eid="hy_ctr_dep_more_city" data-sk-edata="{&quot;dep&quot;:&quot;榆林&quot;}" data-maskcloser="true">
                    <p class="site">榆林</p>
                    <p class="price"><dfn>¥</dfn>2000</p>
                  </li>
                  <li class="" data-cityname="烟台" data-cityid="533" data-sk-eid="hy_ctr_dep_more_city" data-sk-edata="{&quot;dep&quot;:&quot;烟台&quot;}" data-maskcloser="true">
                    <p class="site">烟台</p>
                    <p class="price"><dfn>¥</dfn>2000</p>
                  </li>
                  <li class="" data-cityname="郑州" data-cityid="559" data-sk-eid="hy_ctr_dep_more_city" data-sk-edata="{&quot;dep&quot;:&quot;郑州&quot;}" data-maskcloser="true">
                    <p class="site">郑州</p>
                    <p class="price"><dfn>¥</dfn>2000</p>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--自动导航模块-->
    <div class="mui-col-sm-12 mui-col-xs-12 detail_tab_wrap">
      <div class="nav detail_slide_tab" id="nav-container">
        <ul id="nav-box">
          <li class="cur"><a href="#js_route_box">6日行程</a></li>
          <li><a href="#js_pm_recommend">产品特色</a></li>
          <li><a href="#js_cost_info">费用需知</a></li>
        </ul>
      </div>
      <div id="text">
        <!--第一个内容-->
        <div style="width:100%;background:#efeff4;">

          <div id="js_route_box">
            <div class="route_arrange_col">

              <div class="route_arrange" v-for="(triplist, index) in trip_info" :key="triplist.index">
                <h2 id="route_anchor_0" class="route_arrange_title js_route_mask_btn">
                        <strong>第{{index + 1}}天</strong>
                        <span>{{triplist.title.start}}~{{triplist.title.end}}</span>
                    </h2>
                <ul class="route_arrange_list" v-for="trip in triplist.trip" :key="trip.index">
                  <li class="time_icon_04">
                    <p>{{trip.info}}</p>
                  </li>
                  
                </ul>
              </div>
            </div>
          </div>

        </div>
        <!--第二个内容-->
        <div style="width:100%;background:#efeff4;">
          <!--产品经理推荐-->
          <div id="js_pm_recommend" class="detail_mod_box detail_mod_pm">
            <h3 class="mod_hd">
                      <img class="pm_photo" src="https://dimg04.c-ctrip.com/images/fd/vacations/g3/M04/0E/EF/CggYGVbKpIGAc2QNAAANfMoZ-9g901_C_140_140_Q80.jpg" alt="">
                      产品经理推荐
                  </h3>
            <div class="mod_bd">
              <ul class="detail_text_list" v-for="item in characterdata" :key="item.index">
                <li>{{item}}</li>
              </ul>
            </div>
          </div>
          <!--产品特色-->
          <div id="js_description_placeholder">
            <div id="js_description" class="detail_mod_box detail_mod_feature">
              <h3 class="mod_hd">产品特色</h3>
              <div class="mod_bd" id="lyx_cpts" >
                <h4>{{productdata.secondname}}</h4>
                <p>{{productdata.thirdname}}</p>
              </div>
              <!--<div id="js_description_show" class="detail_feature_up">点击收起全部</div>-->
            </div>
          </div>
        </div>
        <!--第二个内容结束-->

        <!--第三个内容开始-->
        <div style="width:100%;background:#efeff4;">
          <div class="js_tab_showbox notice_box">
            <div class="route_arrange_hd"><span>须知</span></div>
            <!--费用说明-->
            <div id="js_cost_info">
              <div>
                <dl class="profile_info">
                  <dd>
                    <h3 class="pm_title">费用包含</h3>
                    <ul class="pm_list" id="lyx_bhfy">

                      <li>{{str}}</li>
                      <li>{{smallstr}}</li>
                      <li>{{sleepstr}}</li>
                      <li>{{eatstr}}</li>
                      <li>{{orderstr}}</li>
                    </ul>
                  </dd>
                </dl>
                <dl class="profile_info">
                  <dd>
                    <h3 class="pm_title">预定须知</h3>
                    <ul class="pm_list" id="lyx_yujing">
                      <li>{{cautionsleepstr}}<br>{{addstr}}
                        <br> {{cautionstr}}
                        <br> {{importantstr}}
                        <br> {{speelstr}}
                        <br> {{paystr}}
                        <br> {{peoplestr}}</li>
                    </ul>
                  </dd>
                </dl>
              </div>
            </div>

            <!--<ul class="detail_new_more more_info">
              <li class="js_to_booking_note" id="ctm_tour_detail_booking_note">
                <a href="javascript:;">预订须知</a>
              </li>
              <li class="js_to_question" id="ctm_tour_detail_qa">
                <a href="/webapp/vacations/tour/Ask/p2423112s2.html" data-sk-eid="hy_ctr_nots">常见问题(85)</a>
              </li>
            </ul>-->

            <!--相关游记-->

            <!--更多线路-->
            <!--<div id="js_moreline_placeholder">
              <div id="ctm_tour_detail_moreline" class="js_more_detail detail_mod_box detail_mod_more">
                <h3 class="mod_hd">更多线路</h3>
                <ul class="more_list">
                  <li data-pid="2934305" data-sid="2" data-did="37">
                    <p>『自营纯玩』丽进昆出 酒店随选 全新玩法</p><span><strong class="more_price"><dfn>¥</dfn>2916</strong>起</span></li>
                  <li data-pid="3033782" data-sid="2" data-did="2">
                    <p>『自营纯玩』丽进昆出 1晚住金茂君悦 </p><span><strong class="more_price"><dfn>¥</dfn>5441</strong>起</span></li>
                  <li data-pid="4653398" data-sid="2" data-did="2">
                    <p>【自营纯玩】昆进丽出+洱海骑行~昆明1日DIY</p><span><strong class="more_price"><dfn>¥</dfn>3687</strong>起</span></li>
                </ul>
              </div>
            </div>-->

            <!--包团定制入口-->

            <!--<div id="dingzhi_entry" class="detail_mod_box detail_mod_mice">
              <h3 class="mod_hd">定制旅行</h3>
              <div class="mod_bd">
                <p>想要行程更灵活？独立成团欢乐旅行，找旅行定制师来搞定！</p>
              </div>
              <span class="detai_s_btn">立即定制</span>
            </div>-->

            <!-- 6重保障 S -->
            <ul class="six_slogo" style="height: 100px;">
              <li>特殊原因退订保障</li>
              <li>自然灾害保障金</li>
              <li>旅游预警机制</li>
              <li>应急援助体系</li>
              <li>一站式旅游保险</li>
              <li>透明团(限跟团游)</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <yd-tabbar fixed bgcolor="#ff7f50" class="bottabbar" v-bind:style="bot">
      <!-- <router-link :to="{path:'boutiquelinebuy',query: {}}"> -->
        <div style="height:40px;width:100%;" class="r_url">
          <router-link :to="{path:'boutiquelinebuy',query: basedata}">在线预订
          </router-link>
        </div>
      <!-- </router-link> -->
    </yd-tabbar>
  </div>  
</template>

<script>
export default {
  name: 'boutiquelinedinfo',
  data() {
    return {
      bot: {
        'position': 'fixed',
        'bottom': '1rem'
      },
      mainbody: {
        'margin-bottom': '1rem'
      },
      outdata: [],
      show2: false,
      listdata: {},
      bookline: [],
      basedata: {},
      labeldata: {},
      characterdata: {},
      productdata: {},
      str: '',
      smallstr: '',
      sleepstr: '',
      eatstr: '',
      orderstr: '',
      cautionsleepstr: '',
      addstr: '',
      cautionstr: '',
      importantstr: '',
      speelstr: '',
      paystr: '',
      peoplestr: '',
      trip_info: [],
      swiper: '',
      traveldatearr: [],
      now: [],
      flag: ''
    };
  },
  mounted: function() {
    this.listdata = this.$route.query;
    this.load();
    this.getLineDetail();
    this.lineSendPlaceAndDateTime();
    this.lineTripInfo();
    this.lineCharateristInfo();
    this.lineIncludeInfo();
    this.lineWarningInfo();
    // 判断浏览器类型 打开方式是否是微信浏览器方式打开
    var ua = window.navigator.userAgent.toLowerCase()
    if (ua.match(/MicroMessenger/i) == 'micromessenger') {
      this.bot = {
        'position': 'fixed',
        'bottom': '0'
      };
      this.mainbody = {
      }
    } else {
    }
  },
  methods: {
    // 服务保障点击事件
    guarantee() {
      this.$refs.lyx_ctbz.style.display = 'block';
    },
    closemask() {
      this.$refs.lyx_ctbz.style.display = 'none';
    },
    load() {
    },
    // 基本信息
    getLineDetail() {
      this.hdAjax({
        url: this.API.lineDetail,
        data: {
          product_id: this.$route.query.id
        },
        success: (resultData) => {
          this.basedata = resultData.data;
        }
      });
    },
    // //团期
    lineSendPlaceAndDateTime() {
      this.hdAjax({
        url: this.API.lineSelectDate,
        data: {
          product_id: this.$route.query.id
        },
        success: (resultData) => {
          for (var i = 0; i < resultData.data.results.length; i++) {
            var dic = resultData.data.results[i];
            dic['xmtour_date'] = this.datetoF(resultData.data.results[i].tour_date);
            this.traveldatearr.push(dic);
          }
          this.sendTimeSwiper();
        }
      });
    },
    datetoF(data) {
      var now = data.split('-');
      return now[1] + '/' + now[2];
    },
    // 行程信息(标签)
    lineTripInfo() {
      this.hdAjax({
        url: this.API.lineTripInfo,
        data: {
          product_id: this.$route.query.id
        },
        success: (resultData) => {
          this.labeldata = resultData.data.characteristic_words_arr.split(' ');
          // 行程
          this.trip_info = JSON.parse(resultData.data.trip_info_json);
          console.log(JSON.parse(resultData.data.trip_info_json));
          // var txthtml = template(document.getElementById('trip').innerHTML, { data: trip_info });
        }
      });
    },
    // 活动特色
    lineCharateristInfo() {
      this.hdAjax({
        url: this.API.lineCharateristInfo,
        data: {
          product_id: this.$route.query.id
        },
        success: (resultData) => {
          console.log(resultData);
          this.characterdata = resultData.data.product_manage_ecommend_arr.split('|');
          console.log(JSON.parse(resultData.data.title_class_json)[0]);
          this.productdata = JSON.parse(resultData.data.title_class_json)[0];
        }
      });
    },
    // 费用包含
    lineIncludeInfo() {
      this.hdAjax({
        url: this.API.lineIncludeInfo,
        data: {
          product_id: this.$route.query.id
        },
        success: (resultData) => {
          console.log(resultData);
          console.log(resultData.data.big_traffic_return_ticket);
          if (resultData.data.big_traffic_economy_ticket === '0') {
            if (resultData.data.big_traffic_tax === '0') {
              this.str += '含税经济舱机票、';
            } else {
              this.str += '不含税经济舱机票、';
            }
          }
          if (resultData.data.big_traffic_train_ticket === '0') {
            if (resultData.data.big_traffic_train_ticket_type === '0') {
              this.str += '往返火车票、';
            } else if (resultData.data.big_traffic_train_ticket_type === '1') {
              this.str += '去程火车票、';
            } else if (resultData.data.big_traffic_train_ticket_type === '2') {
              this.str += '返程火车票、';
            } else if (resultData.data.big_traffic_train_ticket_type === '3') {
              this.str += '中间段火车票、';
            }
          }
          if (resultData.data.big_traffic_tourist_bus === '0') {
            if (resultData.data.big_traffic_bus_type === '0') {
              this.str += '往返交通旅游大巴、';
            } else if (resultData.data.big_traffic_bus_type === '1') {
              this.str += '去程交通旅游大巴、';
            } else if (resultData.data.big_traffic_bus_type === '2') {
              this.str += '返程交通旅游大巴、';
            } else if (resultData.data.big_traffic_bus_type === '3') {
              this.str += '全程交通旅游大巴、';
            }
          }
          if (resultData.data.big_traffic_local_tourist_bus === '0') {
            this.str += '当地交通旅游大巴、';
          }

          if (resultData.data.big_traffic_return_ticket === '0') {
            this.str += '往返车票、';
          }

          if (resultData.data.big_traffic_steamer_ticket === '0') {
            if (resultData.data.big_traffic_steamer_ticket_type === '0') {
              this.str += '往返船票、';
            } else if (resultData.data.big_traffic_steamer_ticket_type === '1') {
              this.str += '去程船票、';
            } else if (resultData.data.big_traffic_steamer_ticket_type === '2') {
              this.str += '返程船票、';
            } else if (resultData.data.big_traffic_steamer_ticket_type === '3') {
              this.str += '全程船票、';
            }
          }
          if (resultData.data.little_traffic_traffic === '0') {
            if (resultData.data.little_traffic_traffic_type === '0') {
              this.smallstr += '往返小交通';
            } else if (resultData.data.little_traffic_traffic_type === '1') {
              this.smallstr += '去程小交通、';
            } else if (resultData.data.little_traffic_traffic_type === '2') {
              this.smallstr += '返程小交通、';
            }
          }

          if (resultData.data.little_traffic_scenic_car === '0') {
            this.smallstr += '景区内用车、';
          }

          if (resultData.data.safe_contain === '0') {
            this.smallstr += '保险、';
          }

          if (resultData.data.stay_type === '0') {
            this.sleepstr += '行程所列酒店、';
          } else if (resultData.data.stay_type === '1') {
            this.sleepstr += resultData.data.stay_hotel_star + '星级标准' + resultData.data.stay_room_capacity + '人间、';
          } else if (resultData.data.stay_type === '2') {
            this.sleepstr += '普通酒店标准' + resultData.data.stay_room_capacity + '人间、';
          } else if (resultData.data.stay_type === '3') {
            this.sleepstr += resultData.datadest_hotel_destination + '目的地酒店标准' + resultData.data.stay_room_capacity + '人间、';
          }
          if (resultData.data.cruises_dest_messages === '0') {
            this.sleepstr += '目的地游轮、';
          }

          if (resultData.data.dining_type === '0') {
            this.eatstr += resultData.data.dining_early + '早' + resultData.data.dining_dinner + '正、';
          } else if (resultData.data.dining_type === '1') {

          } else if (resultData.data.dining_type === '2') {
            this.eatstr += '酒店含早正餐自理、';
          } else if (resultData.data.dining_type === '3') {
            this.eatstr += '其他：' + resultData.data.dining_custom + '、';
          }

          if (resultData.data.admission_ticket === '1') {
            this.orderstr += '门票';
          }
          if (resultData.data.guide_service_type === '0') {
            this.orderstr += '当地中文导游、';
          } else if (resultData.data.guide_service_type === '1') {
            this.orderstr += '专职中文领队兼导游(境外)、';
          } else if (resultData.data.guide_service_type === '2') {
            this.orderstr += '全程陪同中文导游(境内)、';
          } else if (resultData.data.guide_service_type === '3') {
            this.orderstr += '专职领队和当地中文导游(境外)、';
          } else if (resultData.data.guide_service_type === '4') {
            this.orderstr += '全陪和当地中文导游(境内)、';
          }
          if (resultData.data.guide_service_driver_tip === '0') {
            this.orderstr += resultData.data.guide_service_driver_price + '元司机小费、';
          }
          if (resultData.data.child_fee_exist === '0') {
            this.orderstr += '儿童标准价、';
          }
          if (resultData.data.ticket_tax_round_trip === '0') {
            this.orderstr += resultData.data.ticket_tax_fee + '元往返机票税、';
          }
          var arrtuijian = resultData.data.else_messages_arr.split('|');
          if (arrtuijian.length !== 0) {
            // this.smallstr+=resultData.data.ticket_tax_fee+'元往返机票税、';
            for (var x = 0; x < arrtuijian.length; x++) {
              this.orderstr += arrtuijian[x] + '、';
            }
          }
        }
      });
    },
    // 预定须知
    lineWarningInfo() {
      this.hdAjax({
        url: this.API.lineWarningInfo,
        data: {
          product_id: this.$route.query.id
        },
        success: (resultData) => {
          console.log(resultData);
          // 出行警示
          if (resultData.data.hint_cancel_trip === '0') {
            this.cautionstr += '此团在收容人数不足' + resultData.data.hint_min_travel_population + '人时提前' + resultData.data.hint_ravel_advance_notification + '天通知、';
          }
          if (resultData.data.hint_touring_drop_out === '0') {
            this.cautionstr += '团队游览允许擅自离队、';
          } else {
            this.cautionstr += '团队游览不允许擅自离队、';
          }
          if (resultData.data.hint_touring_penalty === '0') {
            this.cautionstr += '违约需要支付' + resultData.data.hint_touring_out_money + '元违约金、';
          }
          if (resultData.data.hint_not_outing_explain === '0') {
            this.cautionstr += '甲方原因无法出游乙方负责说明。';
          } else if (resultData.data.hint_not_outing_explain === '0') {
            this.cautionstr += '不存在甲方原因无法出游乙方负责说明。';
          }

          if (resultData.data.additional_lijiang_upkeep === '0') {
            this.addstr += '丽江维护费80元每人、';
          }
          if (resultData.data.additional_hainan_payment === '0') {
            this.addstr += '海南政府调节金' + resultData.data.additional_fee + '每人、';
          }
          if (resultData.data.additional_extra_fee === '0') {
            this.addstr += '存在因交通延阻、战争、政变、罢工、天气、飞机机器故障、航班取消等导致额外费用、';
          }
          if (resultData.data.additional_personal_fee === '0') {
            this.addstr += '酒店内洗漱、理发、电话、传真、收费电视、饮品、烟酒等个人消费。';
          }

          this.importantstr += '最晚收材料提前' + resultData.data.bed_material_commit + '天、'
          if (resultData.data.important_hair_regiment_type === '0') {
            this.importantstr += '出发地成团、';
          } else if (resultData.data.important_hair_regiment_type === '1') {
            this.importantstr += '目的地成团、';
          } else if (resultData.data.important_hair_regiment_type === '2') {
            this.importantstr += '中转地联运、';
          }
          if (resultData.data.important_group_type === '0') {
            this.importantstr += '独家发团、';
          } else if (resultData.data.important_group_type === '1') {
            this.importantstr += '联合发团、';
          }
          if (resultData.data.important_spell_group === '0') {
            this.importantstr += '非行程中拼团、';
          } else if (resultData.data.important_spell_group === '1') {
            this.importantstr += '行程中拼团、';
          }
          if (resultData.data.important_local_join === '0') {
            this.importantstr += '存在当地人员参团、';
          }
          if (resultData.data.important_spell_car === '0') {
            this.importantstr += '存在拼车、';
          }
          if (resultData.data.important_change_car_guide === '0') {
            this.importantstr += '存在当地换车或导游、';
          }

          if (resultData.data.stay_spell_room === '0') {
            this.cautionsleepstr += '不可拼房、';
          } else if (resultData.data.stay_spell_room === '1') {
            this.cautionsleepstr += '可亲友加床、';
          }
          if (resultData.data.stay_toilet_articles === '0') {
            this.cautionsleepstr += '提供洗漱用品。';
          } else if (resultData.data.stay_toilet_articles === '1') {
            this.cautionsleepstr += '不提供洗漱用品。';
          }

          if (resultData.data.spellgroup_count_right === '0') {
            this.speelstr += '共拼团' + resultData.data.spellgroup_count + '次（准确）';
          } else if (resultData.data.spellgroup_count_right === '1') {
            this.speelstr += '共拼团' + resultData.data.spellgroup_count + '次（估算）';
          }

          this.paystr = '1、为确保您能够按时出行，产品确认后请在' + resultData.data.payinfo_full + '小时内付款，同时按要求尽快提供出游所需要的材料并签订出游合同' + '2、为确保您能够按时出行，产品确认后请在' + resultData.data.payinfo_advance + '小时内付预付款，同时按要求尽快提供出游所需要的材料，并于出团前5个工作日交齐尾款并签订出游合同' + '3、预定时请告知您的出游人数，出发日期、住宿、用餐标准、以及您的特殊要求';

          if (resultData.data.special_order_min_right === '0') {
            this.peoplestr += '订单少于' + resultData.data.special_order_min_num + '人时需要确认、';
          }
          if (resultData.data.special_order_max_right === '0') {
            this.peoplestr += '订单多于' + resultData.data.special_order_max_num + '人时需要确认、';
          }
          if (resultData.data.special_age_min_right === '0') {
            this.peoplestr += '出游人年龄小于' + resultData.data.special_age_min_num + '岁不接收、';
          }
          if (resultData.data.special_age_max_right === '0') {
            this.peoplestr += '出游人年龄大于' + resultData.data.special_age_max_num + '岁不接收、';
          }
          if (resultData.data.special_exceed_age_right === '0') {
            this.peoplestr += '出游人年龄大于' + resultData.data.special_exceed_age_num + '岁需要签署健康协议、';
          }
          if (resultData.data.special_receive_foreignness === '0') {
            this.peoplestr += '接收外籍游客、';
          } else if (resultData.data.special_receive_foreignness === '0') {
            this.peoplestr += '不接收外籍游客、';
          }
          if (resultData.data.special_region_limit === '0') {
            this.peoplestr += '存在地域限制。';
          }
        }
      });
    },
    // 团期
    sendTimeSwiper() {
      this.swiper = new Swiper('.swiper-container', {
        scrollbar: '.swiper-scrollbar',
        scrollbarHide: true,
        slidesPerView: 'auto',
        spaceBetween: 10,
        grabCursor: true
      });
    },
    checkdate(selectedDate) {
      console.log(selectedDate);
      this.$router.push({path: '/boutiquelinebuy', query: {'datetime': selectedDate.tour_date, 'id': this.$route.query.id, 'manPrice': selectedDate.adult_sale_price, 'childPrice': selectedDate.children_sale_price, 'product_info': this.listdata}});
    }

  }
};
</script>

<style>
body {
  font-family: "微软雅黑";
  background-color: #f0f0f0;
}
header {
  background-color: #393a3f;
}
/*遮罩层*/
.overlayer{
    position:fixed;
    left:0;
    top:0;
    width:100%;
    height:100%;
    z-index:10;
}
.detail_product_intro {
	background-color: #FFF;
	padding: 10px 15px 0;
	margin-bottom: 10px;
	position: relative;
}
.detail_intro_box {
    position: relative;
    min-height: 60px;
}
.detail_product_intro h2 {
    font-size: 16px;
    line-height: 18px;
    font-weight: normal;
    font-family: Arial,"Lucida Grande",Verdana,"Microsoft YaHei",hei;
    overflow: hidden;
    clear: both;
}
.detail_product_intro .detail_study_tips {
    font-size: 12px;
    color: #666;
    margin-top: 2px;
}
/*价格区域*/
.price_box_new {
    margin: 9px 0 10px;
    line-height: 20px;
    position: relative;
    padding-right: 108px;
}
.price_new, .price_sale {
    font-size: 18px;
    color: #ff7d13;
    display: inline-block;
    margin-right: 5px;
}
.price_new_save {
    margin-right: 5px;
}
.price_new_save, .old_price_new {
    display: inline-block;
    font-size: 12px;
    color: #ff7d13;
    white-space: nowrap;
}
.price_new dfn, .price_sale dfn {
    font-size: 12px;
}
.price_new em, .price_sale em {
    font-weight: normal;
    font-size: 12px;
    color: #666;
    margin-left: 2px;
}
/*标签区域*/
.detail_label {
    padding-bottom: 8px;
}
.detail_label i {
    font-size: 12px;
    display: inline-block;
    line-height: 14px;
    height: 14px;
    color: #787878;
    background: #fff;
    vertical-align: top;
    padding: 1px 2px 0;
    position: relative;
    margin-right: 3px;
}
.detail_label i:after {
    border-color: #ccc;
    border-radius: 4px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.detail_mod_schedule .schedule_list span:before, .detail_characteristic i:after, .detail_mod_recommend .detail_recommend_label span:after, .detail_mod_recommend .detail_recommend_keyword span:after, .detail_hotel_mod:after, .comment_textarea:after, .order_review_item .comment_textarea:after, .order_pic_list span:after, .abc_schedule dt:after, .detail_label i:after, .detail_product_summary .detail_summary_icon:after, .detail_type_icon:after, .discount_icon_a:after, .detail_start li:after, .travel_guider .icon_guider:after {
    content: "";
    width: 200%;
    height: 200%;
    position: absolute;
    border: 1px solid #e2e2e2;
    left: 0;
    top: 0;
    -webkit-transform: scale(0.5);
    -ms-transform: scale(0.5);
    transform: scale(0.5);
    -webkit-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    transform-origin: 0 0;
    z-index: 9;
}
/*成团保障*/
.detail_safeguard, .detail_ticket {
    margin: 0 -15px;
    padding: 9px 40px 9px 15px;
    color: #666;
    line-height: 17px;
    font-size: 12px;
    position: relative;
}
.border_top_1px:before, .border_bottom_1px:after, .detail_characteristic:before, .detail_mod_box:before, .detail_mod_box:after, .detail_product_intro:after, .detail_slide_tab:before, .detail_slide_tab:after, .detail_mod_more .more_list li:before, .characteristic_info .characteristic_list li:after, .detail_pop .pop_list li:after, .detail_bottom:after, .more_info:before, .more_info li:after, .detail_dr_share:after, .daren_pop li:after, .daren_share_pop dd:after, .detail_favorable:before, .detail_mod_feature .detail_feature_down:before, .detail_mod_feature .detail_feature_up:before, .detail_recommend_list li:before, .detail_mod_recommend .detail_recommend_keyword:before, .route_arrange_list .route_hotel_other:after, .detail_hotel_info:after, .detail_hotel_info:before, .comment_item:before, .comment_item:after, .order_details:after, .order_review_frm_list:before, .order_review_frm_list:after, .order_review_item:before, .order_review_item:after, .order_review_frm_list li.order_tour_feel:before, .order_review_list:before, .order_review_list li:after, .detail_comment_list:before, .detail_header_top:after, .detail_header_scroll:after, .schedule_hd:nth-child(3):before, .booking_notice_detail li:before, .booking_notice_detail li:after, .detail_hotel_list li:before, .detail_product_summary li:after, .detail_safeguard:before, .order_review_mod:before, .order_review_mod:after, .detail_ticket:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    background: #e2e2e2;
    width: 100%;
    height: 1px;
    -webkit-transform: scaleY(0.5);
    -ms-transform: scaleY(0.5);
    transform: scaleY(0.5);
    -webkit-transform-origin: 0 top;
    -ms-transform-origin: 0 top;
    transform-origin: 0 top;
}
.detail_safeguard em {
    margin-right: 10px;
    display: inline-block;
    vertical-align: middle;
    padding-left: 14px;
    position: relative;
}
.detail_safeguard em:before {
    content: "";
    position: absolute;
    width: 12px;
    height: 13px;
    background-position: -90px -664px;
    left: 0;
}
.detail_safeguard:after, .detail_ticket:after {
    content: "";
    overflow: hidden;
    width: 8px;
    height: 13px;
    top: 50%;
    margin-top: -7px;
    background-position: -20px -594px;
    right: 15px;
    position: absolute;
}
/* .route_day span, .route_day i, .route_day i:after, .route_loading i, .base_loading i, .wireless_failure .no_wifi .wifi_ico, .wireless_failure .no_wifi:before, .wireless_failure .dial_service .dial_btn:before, .fee_txt h3:after, .more_info li a:after, .banner_box .img_wrap .pic_loading:after, .banner_box .pic_fail:after, .banner_box .pic_none:after, .score_ico li, .no_comment:before, .visa_list li a:after, .man_box:before, .child_box:before, .icon_date, .box_hidden h4:after, .plan_list:before, .train_list:before, .ship_list:before, .bus_list:before, .arrows_icon:after, .btn_cur:before, .base_list .take_site dt i.cur:after, .item_select li.cur:after, .passenger_tips:after, .passenger_select .passenger_datail.cur i:after, .passenger_select .edit_icon:after, .coupon_list .cur i:after, .finsh_title:before, .hotel_icon:before, .hotel_addresultDatas:before, .wifi_icon, .park_icon, .date_ico:before, .room_area:before, .room_peo:before, .room_balance:before, .room_floor:before, .room_bed:before, .room_smok:before, .room_web:before, .book_limit:after, .book_intro:after, .htl_list:before, .htl_list .addresultDatas:before, .htl_list .tel_num:before, .add_icon:after, .more_text a:after, .query_myorder li:after, .child_box .child_notice:before, .loading_ico, .hotel_list li:before, .sort_item:after, .list_filter_item dd:after, .list_filter_checkbox p i:after, .no_collection_notice:before, .v_guest .edit_icon:after, .v_passenger_tips:after, .list_filter_radio .checkbox_ico:after, .detail_featuresultData:after, .banner_box .collect_ico, .price_box .discount, .time_icon_01::before, .time_icon_02::before, .time_icon_03::before, .time_icon_04::before, .time_icon_05::before, .time_icon_06::before, .time_icon_07::before, .time_icon_08::before, .time_icon_09::before, .time_icon_10::before, .time_icon_11::before, .time_icon_12::before, .time_icon_13::before, .time_icon_14::before, .abc_fixed_btn::before, .hotel_fixed_btn::before, .leader_detail .leader_score i, .score_giving i.mobile::before, .my_consult h3::before, .score_fliter li.current::after, .detail_characteristic dd:after, .detail_mod_leader .leader_score i, .consult_city_choose li.current::after, .detail_characteristic .wifi:before, .detail_characteristic .dv:before, .detail_favorable:after, .detail_characteristic:after, .detail_more_down .more_back, .detail_dr_share dd:after, .daren_share_pop .share_close:after, .content_list .other .wifi:before, .content_list .other .dv:before, .detail_mod_dealer .dealer_call span:before, .detail_mod_feature .detail_feature_down:after, .detail_mod_feature .detail_feature_up:after, .banner_box .banner_tips:before, .title_down, .title_up, .route_consume:before, .detail_safeguard em:before, .visa_agency_down:after, .visa_agency_up:after, .other_attention .mod_hd:before, .ico_exclusive_discount, .discount_icon_phone, .detail_similar_product .similar_product_supplier i, .detail_discount:after, .detail_safeguard:after, .detail_ticket:after, .pop_close, .contrast_safeguard:before, .detail_travel_num span:before, .detail_travel_num em:before, .hotel_hint_close, .detail_mod_schedule .schedule_slide_tips:after, .detail_safeguard_list dt:before, .travel_guider .con:after {
    background-image: url(../../../imgs/views/line/un_detail.png);
    background-repeat: no-repeat;
    background-size: 104px auto;
} */
/*日期控件*/
.detail_mod_schedule {
    padding-top: 0;
}
.detail_mod_box {
    margin-bottom: 10px;
    padding: 4px 0 0 15px;
    background: #fff;
    position: relative;
}
.c_city_set {
    background: #fff;
    margin-bottom: 10px;
    position: relative;
}
.c_city_hd {
    line-height: 44px;
    position: relative;
    padding-right: 33.3%;
}

.c_city_set .c_more_set {
    position: absolute;
    right: 0;
    top: 0;
    line-height: 44px;
    padding-right: 30px;
    font-size: 12px;
    color: #333;
}

.c_city_hd .cui-tab-mod {
    position: relative;
    background: #fff;
    border-bottom: #fff 1px solid;
    border-image: none;
}
.cui-tab-mod {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    height: 43px;
    line-height: 43px;
    border-bottom: #bcbcbc 1px solid;
    background-color: #fafafa;
    color: #666;
    font-size: 15px;
    position: relative;
    display: table\9;
    width: 100%;
}
ul, ol {
    list-style: none;
}


.cui-tab-mod li.cui-tab-current {
    color: #099fde;
}
.cui-tab-scrollbar {
	width: 50%;
    position: absolute;
    left: 0;
    height: .2rem;
    bottom: -0.05rem;
    background-color: #099fde;
    -webkit-transition: -webkit-transform 300ms ease-in-out;
    -moz-transition: -moz-transform 300ms ease-in-out;
    -ms-transition: -ms-transform 300ms ease-in-out;
    transition: transform 300ms ease-in-out;
    z-index: 2;
}
.c_city_set .c_more_set:after {
    content: "";
    width: 6px;
    height: 6px;
    position: absolute;
    right: 15px;
    top: 50%;
    margin-top: -5px;
    border: 0;
    border-top: #ccc 2px solid;
    border-left: #ccc 2px solid;
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
}

.c_city_bd {
    position: relative;
    padding: 15px 0;
}
.c_city_bd:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    background: #e2e2e2;
    width: 100%;
    height: 1px;
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
    -webkit-transform-origin: 0 top;
    transform-origin: 0 top;
 }
.c_city_list_box {
    margin: 0 66px 0 15px;
    overflow: hidden;
}
.c_city_list a{
    float: left;
    width: 65px;
    margin-right: 10px;
    padding-top: 5px;
    text-align: center;
    border-radius: 4px;
    height: 40px;
    line-height: 16px;
    font-size: 12px;
    position: relative;
    box-sizing: border-box;
    color: #333;
}    
.c_city_list a:after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    border: #ccc 1px solid;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    width: 200%;
    height: 200%;
    border-radius: 6px;
    box-sizing: border-box;
}
.c_city_list span {
    display: block;
}
.c_city_list .price {
    font-size: 12px;
    margin-top: -2px;
    color: #f90;
    font-weight: normal;
}

.swiper-slide{
	width: auto;
}

.c_more {
    color: #009fde;
    font-size: 12px;
    position: absolute;
    right: 0;
    top: 56px;
    bottom: 15px;
    width: 65px;
    padding: 2px 18px 0;
    box-sizing: border-box;
    background: #fff;
    text-align: center;
}
.swiper-container {
    margin-left: inherit; 
    overflow-x: inherit;
}
.swiper-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 1;
    display: flex;
    box-sizing: content-box;
}
/*自动导航模块*/
.detail_tab_wrap .detail_slide_tab {
    background-color: #fff;
    height: 42px;
    position: relative;
    overflow: hidden;
}

*{  
    list-style:none;  
    margin:0;  
    padding:0;  
    text-decoration:none;  
    font-family:'Microsoft YaHei';  
  
}  
.detail_tab_wrap #nav-box li{  
	
    float: left;
    width: 33.3%;
    text-align: center;
    /*border-bottom: 4px solid transparent;*/
    height: 42px;
    line-height: 43px;
    font-size: 16px;
    /*color: #666;*/
	
    /*width:100px;  
    height:50px;  
    line-height:50px;  
    float:left;  
    border-right:2px solid #eee;  
    text-align:center;  
    cursor:pointer;  */
}  
.detail_tab_wrap ul{  
    /*margin:0 auto;*/  
}  
.detail_tab_wrap .nav{  
    height:42px;  
    width:100%;  
    background:#FFFFFF;  
}  
.detail_tab_wrap .nav .cur{  
    background:#fff;  
    border-bottom:2px solid #1a92cf;  
    color: #1491c5;  
}  
.detail_tab_wrap .fixed{  
	z-index: 100;
    position:fixed;  
    top:0;  
    left:0;  
}  
.detail_tab_wrap a{  
    color:#505050;  
}  
/*自动导航的详情1内容*/
.route_arrange_col {
    margin: 10px;
    padding-left: 10px;
    border-radius: 5px;
    background: #fff;
    box-shadow: 0 1px #ccc;
}
.route_arrange {
    position: relative;
}
.route_arrange .route_arrange_title {
    padding: 15px 0;
    font-size: 16px;
}
.route_arrange .route_arrange_title strong {
    margin: 0 5px 0 -16px;
    padding: 0 8px 0 16px;
    float: left;
    font-weight: normal;
    line-height: 24px;
    background: #67c0fb;
    color: #fff;
    position: relative;
}
.route_arrange .route_arrange_title span {
    display: block;
    overflow: hidden;
    color: #333;
    font-weight: normal;
    line-height: 24px;
}
.route_arrange .route_arrange_title:after {
    content: ".";
    display: block;
    height: 1px;
    clear: both;
    visibility: hidden;
}
.route_arrange_list {
    padding-left: 25px;
    margin-top: -1px;
    overflow: hidden;
}
.route_arrange_list li {
    position: relative;
    margin: 0 15px 15px 0;
}
.time_icon_01::before, .time_icon_02::before, .time_icon_03::before, .time_icon_04::before, .time_icon_05::before, .time_icon_06::before, .time_icon_07::before, .time_icon_08::before, .time_icon_09::before, .time_icon_10::before, .time_icon_11::before, .time_icon_12::before, .time_icon_13::before, .time_icon_14::before {
    content: "";
    position: absolute;
    height: 12px;
    width: 12px;
    background-color: #fff;
    left: -24px;
    top: 4px;
}
.route_arrange_list p {
    overflow: hidden;
}
.time_icon_04::before {
    background-position: -45px -555px;
}
.time_icon_01::before, .time_icon_02::before, .time_icon_03::before, .time_icon_04::before, .time_icon_05::before, .time_icon_06::before, .time_icon_07::before, .time_icon_08::before, .time_icon_09::before, .time_icon_10::before, .time_icon_11::before, .time_icon_12::before, .time_icon_13::before, .time_icon_14::before {
    content: "";
    position: absolute;
    height: 12px;
    width: 12px;
    background-color: #fff;
    left: -24px;
    top: 4px;
}
/*自动导航内容2*/
.detail_mod_box .mod_hd {
    font-size: 16px;
    font-weight: normal;
    line-height: 40px;
    padding-right: 15px;
    position: relative;
    overflow: hidden;
}
.detail_mod_pm .pm_photo {
    display: inline-block;
    vertical-align: middle;
    margin-right: 10px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
}
.detail_mod_box .mod_bd {
    padding: 0 15px 12px 0;
    position: relative;
}
.detail_text_list li {
    padding-left: 14px;
    position: relative;
}
.detail_text_list li:before {
    content: "";
    height: 3px;
    width: 3px;
    background-color: #999;
    position: absolute;
    left: 6px;
    top: 8px;
    border-radius: 50%;
}
.detail_mod_feature .mod_bd img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    margin: 5px 0 !important;
}
.detail_mod_feature .mod_bd * {
    text-align: left !important;
    font: 14px/1.5 Arial,"Lucida Grande",Verdana,"Microsoft YaHei",hei !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    position: static !important;
}
/*费用包含*/
.route_arrange_hd {
    margin: 10px;
    text-align: center;
    color: #666;
    position: relative;
}
.route_arrange_hd:before {
    content: "";
    height: 1px;
    background: #d4d4d4;
    position: absolute;
    width: 100%;
    top: 49%;
    left: 0;
    -webkit-transform: scaleY(0.5);
    -ms-transform: scaleY(0.5);
    transform: scaleY(0.5);
}
.route_arrange_hd span {
    position: relative;
    z-index: 1;
    padding: 0 14px;
    background: #EFEFF4;
}
.profile_info {
    padding: 14px 15px;
    background-color: #fff;
    position: relative;
}
.profile_info dd {
    display: table-cell;
    vertical-align: middle;
}
.profile_info .pm_title {
    font: normal 16px/30px Arial,"Lucida Grande",Verdana,"Microsoft YaHei",hei;
}
.detail_new_more {
    margin-top: 10px;
    border: 0 none;
}
.more_info {
    background-color: #FFF;
    position: relative;
}
.more_info li {
    height: 44px;
    line-height: 44px;
    position: relative;
}
.detail_new_more li a {
    padding: 0 30px 0 15px;
}
.more_info li a {
    color: #333;
    font-size: 16px;
    display: block;
    padding: 0 30px 0 10px;
    position: relative;
    white-space: nowrap;
}
.notice_box .more_info li a:after {
    background-position: -20px -594px;
}
.more_info li a:after {
    clear: both;
    content: '';
    position: absolute;
    overflow: hidden;
    width: 8px;
    height: 13px;
    background-position: -10px -187px;
    position: absolute;
    right: 15px;
    top: 16px;
}
.detail_mod_more .more_list li {
    position: relative;
    line-height: 40px;
}
.detail_mod_more .more_list p {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    height: 40px;
    padding-right: 90px;
    color: #000000;
}
.detail_mod_more .more_list span {
    width: 80px;
    position: absolute;
    right: 15px;
    top: 0;
    text-align: right;
    color: #999;
    font-size: 12px;
}
.detail_mod_more .more_list span .more_price {
    color: #f90;
    font-size: 16px;
}
.detail_mod_mice {
    padding-right: 120px;
}

.detail_mod_mice .detai_s_btn {
    position: absolute;
    right: 15px;
    top: 50%;
    margin-top: -13px;
    padding: 0 25px;
}
.detai_s_btn {
    display: inline-block;
    text-align: center;
    padding: 0 17px;
    line-height: 27px;
    position: relative;
}
.detai_s_btn:after {
    content: "";
    width: 200%;
    height: 200%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border: 1px solid #999;
    border-radius: 6px;
    position: absolute;
    left: 0;
    top: 0;
    -webkit-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: scale(0.5);
    -ms-transform: scale(0.5);
    transform: scale(0.5);
}
.detail_mod_mice .mod_hd {
    line-height: 22px;
    padding-top: 10px;
}
.detail_mod_mice p {
    font-size: 12px;
    color: #999;
}
/*六重保障*/
.six_slogo {
    position: relative;
    padding-left: 100px;
    margin: 20px auto;
    max-width: 414px;
}
.six_slogo:before {
    content: '';
    position: absolute;
    left: 30px;
    top: -4px;
    height: 60px;
    width: 65px;
    background-image: url(https://pic.c-ctrip.com/h5/group_travel/un_detail_n.png);
    background-repeat: no-repeat;
    background-position: 0 -200px;
    background-size: 104px auto;
}
.six_slogo li {
    line-height: 18px;
    font-size: 12px;
    padding-left: 20px;
    float: left;
    width: 50%;
    position: relative;
    box-sizing: border-box;
    white-space: nowrap;
}
.six_slogo li:before {
    content: '';
    position: absolute;
    left: 4px;
    top: 4px;
    height: 10px;
    width: 10px;
    background-image: url(https://pic.c-ctrip.com/h5/group_travel/un_detail_n.png);
    background-repeat: no-repeat;
    background-position: -70px -40px;
    background-size: 104px auto;
}
/*图标*/
.time_icon_01::before {
	background-position: 0 -555px
}

.time_icon_02::before {
	background-position: -15px -555px
}

.time_icon_03::before {
	background-position: -30px -555px
}

.time_icon_04::before {
	background-position: -45px -555px
}

.time_icon_05::before {
	background-position: -60px -555px
}

.time_icon_06::before {
	background-position: -75px -555px
}

.time_icon_07::before {
	background-position: -90px -555px
}

.time_icon_08::before {
	background-position: 0 -568px
}

.time_icon_09::before {
	background-position: -15px -568px
}

.time_icon_10::before {
	background-position: -30px -568px
}

.time_icon_11::before {
	background-position: -45px -568px
}

.time_icon_12::before {
	background-position: -60px -568px
}

.time_icon_13::before {
	background-position: 0 -685px
}

.time_icon_14:before {
	background-position: -15px -685px
}
/*服务弹出层*/
.detail_mask {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background: rgba(0,0,0,0.85);
    z-index: 999;
    color: #fff;
    padding: 35px 20px 110px;
    display: none;
}
.detail_mask .detail_mask_title {
    text-align: center;
    font-size: 16px;
    font-weight: normal;
    margin-bottom: 25px;
}
.detail_safeguard_list {
    padding-left: 26px;
}
.detail_safeguard_list dt {
    font-size: 15px;
    position: relative;
}
.detail_safeguard_list dt:before {
    content: "";
    position: absolute;
    width: 12px;
    height: 13px;
    background-position: -90px -664px;
    left: -22px;
    top: 4px;
}
/*底部导航*/
.detail_bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 89;
    height: 48px;
    background: #f9f9f9;
    width: 100%;
    display: table;
}
.detail_bottom_box {
    display: table-row;
}
.detail_bottom .detail_collect, .detail_bottom .detail_contrast, .detail_bottom .detail_phone {
    width: 60px;
    font-size: 10px;
    color: #666;
}
.detail_bottom span {
    display: table-cell;
    height: 48px;
    vertical-align: middle;
    text-align: center;
    position: relative;
}
.detail_bottom .detail_btn_orange {
    background: #ff7d13;
    color: #fff;
    font-size: 16px;
}
.detail_bottom .detail_collect:before {
    content: "";
    display: block;
    margin: 4px auto 2px;
    width: 22px;
    height: 20px;
}
.detail_bottom .detail_collect:before, .detail_bottom .detail_contrast:before, .detail_bottom .detail_phone:before {
    background-image: url(https://pic.c-ctrip.com/VacationH5Pic/group_travel/detail/detail_bottom.png);
    background-repeat: no-repeat;
    background-size: 72px auto;
}
.detail_bottom .detail_contrast.cur:before {
    background-position: -26px -20px;
}
.detail_bottom .detail_contrast:before {
    content: "";
    display: block;
    margin: 4px auto 2px;
    width: 20px;
    height: 20px;
    background-position: -26px 0;
}
.detail_bottom span:after {
    content: "";
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    width: 1px;
    background: #ddd;
    -webkit-transform: scaleX(0.5);
    transform: scaleX(0.5);
}
.detail_mod_feature .detail_feature_up {
    text-align: center;
    line-height: 43px;
    color: #666;
    position: relative;
    margin-top: 8px;
}    
.hd-nav{
    padding: 0px;
    background: #ff7d13;
}

.r_url{
    line-height: 48px;
    color: #fff;
    font-size: 16px;
    text-align: center;
}

</style>
